<template>
  <div class="box">
    <h3>欢迎光临vue水果店吧</h3>
    <div>苹果 {{apple.price}}￥/斤，折扣《{{apple.rebate}} 折》</div>
    <div>请输入你要购买的斤数<input v-model.number="apple.number" type="number"></div>
    <div><button @click="closing">结账买单~</button></div>
    <div> 账单：总价{{cloing.total}} 元 折后价：{{cloing.total*apple.rebate/10}}元 省了{{cloing.total*(10-apple.rebate)/10}}元</div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      apple: {
        price: 10,
        rebate: 8,
        number: 0
      },
      cloing: {
        total: 0
      }
    }
  },

  created () {},

  methods: {
    closing () {
      this.cloing.total = this.apple.price * this.apple.number
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  text-align: center;
  div {
    height: 30px;
    width: 100%;
    border: 1px solid #333;
  }
}
</style>
